<template>
  <div class="patient-detail-page">
    <div class="detail-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/admin/patient-list">患者管理</el-breadcrumb-item>
        <el-breadcrumb-item>病例管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="primary" @click="goBack" icon="el-icon-back" class="back-btn">返回患者列表</el-button>
    </div>
    <PatientBaseInfo :patient="patient" />
    <el-tabs v-model="activeTab">
      <el-tab-pane label="病例管理" name="case">
        <CaseList :patientId="patient.id" />
      </el-tab-pane>
      <el-tab-pane label="就诊/挂号记录" name="visit">
        <VisitList :patientId="patient.id" />
      </el-tab-pane>
      <el-tab-pane label="健康档案" name="health">
        <HealthRecord :patientId="patient.id" />
      </el-tab-pane>
      <el-tab-pane label="标签/分组" name="tags">
        <PatientTags :patientId="patient.id" />
      </el-tab-pane>
      <el-tab-pane label="通讯/通知" name="notify">
        <PatientNotify :patientId="patient.id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PatientBaseInfo from './PatientBaseInfo.vue'
import CaseList from '@/views/admin/medical/case/CaseList.vue'
import VisitList from '@/views/admin/medical/visit/VisitList.vue'
import HealthRecord from '@/views/admin/medical/health/HealthRecord.vue'
import PatientTags from '@/views/admin/medical/tags/PatientTags.vue'
import PatientNotify from '@/views/admin/medical/notify/PatientNotify.vue'

const route = useRoute()
const router = useRouter()
const patient = ref<any>({})
const activeTab = ref('case')

function goBack() {
  router.push('/admin/patient-list')
}

onMounted(() => {
  // 模拟获取患者信息
  patient.value = {
    id: route.params.id,
    name: '张三',
    gender: '男',
    age: 32,
    phone: '13812345678',
    idCard: '510726199001011234',
    address: '四川省绵阳市安州区'
  }
})
</script>
<style scoped>
.patient-detail-page {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 10px 0;
}
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.back-btn {
  margin-left: 24px;
}
</style> 